/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import './index.less';
import Util from '../../utils/utils';

export default class Header extends Component {

    // 初始化状态
    state = {
        userName:'巨人张',
        sysTime: Util.formateDate(new Date().getTime())
    };

    // 组件挂载完毕的钩子
    componentDidMount(){
        setInterval(()=>{
            this.setState({
                sysTime: Util.formateDate(new Date().getTime())
            });
        },1000);
    }

    render() {
        const menuType = this.props.menuType;
        return (
            <div className="header">
                <Row className="header-top">
                    {menuType?
                        <Col span={6} className="logo">
                            <img src="/assets/logo-ant.svg"/>
                            <span>IMooc 通用管理系统</span>
                        </Col>:''
                    }
                    <Col span={menuType?18:24}>
                        <span>欢迎，{this.state.userName}</span>
                        <a href="#">退出</a>
                    </Col>                   
                </Row>
                {
                    menuType?'':
                    <Row className="breadcrumb">
                        <Col span={4}  className="breadcrumb-title">首页</Col>
                        <Col span={20} className="weather">
                            <span className="date">{this.state.sysTime}</span>
                            <span className="weather-detail">晴转多云</span>
                        </Col>
                    </Row>
                }
                
            </div>
        )
    }
}
